<template>
  <div class="listitem" @click.stop="onItem(item)">
    <img :src="item.small_image" alt="">
    <h3>{{item.name}}</h3>
    <p class="text">{{item.spec}}</p>
    <div class="shop">
        <p>
            <span class="red">￥{{item.price}}</span><span class="aa">￥{{item.origin_price}}</span>
        </p>
        <p @click.stop="onShop(item)"><img src="../assets/img/tabbar/shoppingcart_selected.png" alt=""></p>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
    name:"ListItem",
    props:["item"],
    methods: {
        onItem(val){
            // console.log(val);
            this.$store.commit("onItem",val);
            this.$router.push("/item");
        },
        onShop(item){ 
            // if(this.$store.state.list.includes(item)){
            //     Toast("购物车已存在");
            //     return
            // }
            if(localStorage.getItem("taken")){
                this.$store.commit("onList",item);
                Toast("加入购物车");
            }else{
                Toast("请前往登录");
                this.$router.push("login");
            }
        }
    },
}
</script>
<style lang="scss" scoped>
    .listitem{
        width:3rem;
        background-color:#fff;
        padding:0 .16rem;
        margin-top:.2rem;
        img{
            width:2.8rem;
            height:2.8rem;
        }
        .shop{
            display:flex;
            justify-content: space-between;
            p{
                .red{
                    font-size:.3rem;
                    color:red;
                    margin-right:.1rem;
                }
                .aa{
                    color:#ccc;
                    text-decoration:line-through;
                }
                img{
                    width: 0.3rem;
                    height: 0.3rem;
                    margin-right:.2rem;
                }
            }
        }     
    }
</style>